<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5之placeholder属性的优雅解决方案</title>
<style>
	.a{color:#66F; font-weight:bold;}
</style>
</head>

<body>
<p style="color: #69F; text-align: center; font-size: 18px; font-weight: bold;">HTML5之placeholder属性的优雅解决方案</p>
<p>参考网址：http://www.caoren.net/article/?id=30</p>
<p>HTML5的input元素新增了placeholder属性，实现点位符效果，用于提示用户输入的提示语。</p>
<p>示例：</p>
<p>&lt;input type=&quot;text&quot; value=&quot;&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;请输入用户名&quot; /&gt;</p>
<p class="a"><strong>问题描述：</strong></p>
<p>但是，现在连IE6-9都不支持placeholder属性，为了实现跨浏览器，不支持该属性的只能同过JS脚本来实现了。</p>
<p class="a"><strong>解决方案一：</strong></p>
<p>首先判断浏览器是否支持  placeholder，通过判断input是否包含placeholder属性，没有就表示不支持。不支持的就运行JS脚本以实现  placeholder的效果。</p>
<p>JS脚本如下：</p>
<form id="form1" name="form1" method="post" action="">
  <label for="textfield"></label>
  <textarea name="textfield" cols="100" rows="30" readonly="readonly" id="textfield">
<script type="text/javascript">
    function isPlaceHolder(){  //判断浏览器是否支持placeholder
        var input = document.createElement("input");
        return "placeholder" in input;
    }
    if(!isPlaceHolder()){
        function addClass(obj,cls){
            var clsn = obj.className;
            if(clsn.indexOf(cls) == -1){
                obj.className = clsn + (clsn != "" ? " " : "") + cls;
            }
        }
        function removeClass(obj,cls){
            var clsn = obj.className;
            if(clsn.indexOf(cls) != -1){
                obj.className = clsn.replace((clsn.indexOf(" ") != -1 ? " " : "")+cls,"");
            }
        }
        function placeHolder(obj){
            if(!obj){return;}
            var placeholder = obj.getAttribute("placeholder");
            if(obj.value == "" || obj.value == placeholder){
                obj.value = placeholder;
                addClass(obj,"placeholder");
            }
            obj.onfocus = function(){
                if(this.value == this.getAttribute("placeholder")){
                    this.value = "";
                }
                removeClass(obj,"placeholder");
            };
            obj.onblur = function(){
                if(this.value == ""){
                    this.value = this.getAttribute("placeholder");
                    addClass(obj,"placeholder");
                }
            };
        }
        function init(){
            var inps = document.getElementsByTagName("input");
            for(var i=0,len=inps.length;i<len;i++){
                if(inps[i].getAttribute("placeholder")){
                    placeHolder(inps[i]);
                }
            }
        }
        window.onload = init;
    }
</script>
  </textarea>
</form>
<p>这种方法来源于<a href="http://www.taobao.com/" target="_blank">淘宝首页</a>搜索框，把placeholder的文字显示在label中，然后label通过定位显示在input上。</p>
<p>&nbsp;</p>
<p><strong class="a">解决方案二：</strong><br />
</p>
<p> 使用github开源库上的老外开发的placeholder脚本插件：</p>
<p>比如：<a href="https://github.com/Topener/jQuery-html5-placeholder">https://github.com/Topener/jQuery-html5-placeholder</a><br />
  搜索链接：<a href="https://github.com/search?q=jQuery-Placeholder">https://github.com/search?q=jQuery-Placeholder</a>（搜索出来有很多的选择方案，根据需要选择即可）<br />
</p>
</body>
</html>
